<template>
	<view class="content">
		<u-navbar :is-mp-wx="true" :border-bottom="false">
			<template v-slot:right>
				<view class="u-flex u-m-r-40">
					<view v-if="data.utype == 2" class="u-m-r-28" @click="$u.throttle(collectClick,1000)">
						<u-image v-show="data.companyInfo.has_attention ==0" src="/pages/pagesHome/static/collect.png"
							width="42" height="42" mode="widthFix"></u-image>
						<u-image v-show="data.companyInfo.has_attention ==1" src="/pages/pagesHome/static/collect_1.png"
							width="42" height="42" mode="widthFix"></u-image>
					</view>
					<u-image src="/pages/pagesHome/static/share.png" width="42" height="42"
						@click="$u.throttle(shareClick,1000)" mode="widthFix"></u-image>
				</view>
			</template>
		</u-navbar>
		<view class="content_main" :class="{'u-stop-slip':data.show}"
			v-if="data.companyInfo && data.companyInfo.base_info">
			<!-- 基本信息 -->
			<view class="u-flex u-row-between u-m-t-40">
				<view>
					<view class="u-font-36 u-font-weight u-white-60 u-line-1">{{data.companyInfo.base_info.companyname}}
					</view>
					<view class="u-m-t-10 u-font-13" style="color: #867F7F">
						{{`${data.companyInfo.base_info.scale_text} · ${data.companyInfo.base_info.district_text} · ${data.companyInfo.base_info.nature_text}`}}
					</view>
				</view>
				<u-image :src="data.companyInfo.base_info.logo_src" :width="100" :height="100"></u-image>
			</view>
			<!-- 福利 -->
			<view class="u-m-t-36" v-if="data.companyInfo.base_info.tag_text_arr.length > 0">
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in data.companyInfo.base_info.tag_text_arr" :key="index">
						<view class="content_main_tag">{{item}}</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- 公司地址 -->
			<view class="u-m-t-42">
				<view class="u-flex u-row-between">
					<view class="u-font-36 u-font-weight">公司地址</view>
					<view class="u-font-14 u-flex" style="color: #8a8888;" @click="openLocation">
						<u-image src="/pages/pagesHome/static/navigation.png" :width="40" :height="40"></u-image>
						<view class="u-m-l-10">
							导航
						</view>
					</view>
				</view>
				<view class="u-m-t-22 u-font-14" style="color: #646363;">
					{{data.companyInfo.base_info.address}}
				</view>
			</view>
			<!-- 公司介绍 -->
			<view class="u-m-t-38">
				<view class="u-font-36 u-font-weight">公司介绍</view>
				<view class="u-m-t-18">
					<u-read-more show-height="300" closeText="查看更多" text-indent="0" color="#00D075">
						<view class="u-font-14">
							<rich-text :nodes="data.companyInfo.base_info.content"></rich-text>
						</view>

					</u-read-more>
				</view>
			</view>
			<!-- 公司相册 -->
			<view class="u-m-t-48" v-if="data.companyInfo.img_list.length > 0">
				<view class="u-flex u-row-between">
					<view class="u-font-36 u-font-weight">公司相册</view>
					<view class="u-font-14 u-flex" style="color: #8a8888;" @click="toCompanyAlbum">
						<view class="u-m-r-10">
							查看全部
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="u-m-t-18">
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in data.companyInfo.img_list" :key="index">
							<view class="u-m-r-18">
								<u-image :src="item.img_src" :width="468" :height="304" :border-radius="20"></u-image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>


		<!-- 弹窗 -->
		<u-touch-popup :isTouch="data.isTouch" :isRefresh="data.isRefresh" @isShow="isShow" :bottom="data.bottom">
			<view class="touch_popup">
				<view class="touch_popup_header">
					<view class="touch_popup_item">
						<view style="width: 100rpx;margin: auto;">
							<u-gap height="10" bg-color="#bbb"></u-gap>
						</view>
						<view class="u-m-t-20">
							<text class="u-font-32 u-font-weight">职位</text>
							<text
								class="u-font-14 u-m-l-10">{{data.companyInfo.base_info&&data.companyInfo.base_info.jobnum}}</text>
						</view>
					</view>
					<view class="u-p-24 u-p-l-36 u-p-r-36">
						<u-search v-model="data.keyword" :show-action="false" placeholder="请输入职位名称" @search="search"
							@clear="clear"></u-search>
					</view>
				</view>
				<!-- 职位列表 -->
				<u-job-list :height="data.height" :params="data.params" @onRefresh="onRefresh"
					@onRestore="onRestore"></u-job-list>
			</view>
		</u-touch-popup>


		<!-- 分享弹窗 -->
		<u-share :show="data.isShare" :src="data.src" @change="$u.throttle(shareClick,1000)" @close="close"></u-share>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		nextTick,
		reactive
	} from "vue";
	import {
		useUserStore
	} from '/stores/userInfo.js'
	import {
		storeToRefs
	} from 'pinia'
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		// 公司ID
		id: '',
		// 公司信息
		companyInfo: {},
		// 是否显示分享
		isShare: false,
		// 查看更多样式
		shadowStyle: {
			backgroundImage: "none",
			paddingTop: "0",
			marginTop: "0"
		},
		// 是否展开状态
		show: false,
		// 判断是否从更多职位进入详情页
		bottom: 0,
		// 是否展示更多职位
		isTouch: true,
		// 列表是否下拉刷新
		isRefresh: false,
		// 列表展示高度
		height: '',
		keyword: '',
		// 列表筛选条件
		params: {

		}
	})
	const {
		isLogin
	} = storeToRefs(useUserStore())

	onLoad(({
		id,
		show
	}) => {
		data.id = id
		if (JSON.parse(show)) {
			data.bottom = 0
		} else {
			nextTick(() => {
				data.bottom = -((uni.$u.sys().windowHeight * 0.9) - 60)
			})
		}
		getCompanyInfo()
	})
	// 去公司相册页面
	const toCompanyAlbum = () => {
		uni.$u.route('/pages/pagesHome/detailPages/companyAlbum', {
			album: JSON.stringify(data.companyInfo.img_list)
		})
	}
	// 列表下拉刷新复位
	const onRestore = () => {
		data.isRefresh = false
	}
	// 列表下拉刷新
	const onRefresh = () => {
		if (data.show) {
			data.isRefresh = true
		}
	}
	// 清空
	const clear = () => {
		data.params.keyword = ''
	}
	// 搜索
	const search = (value) => {
		data.params.keyword = value
	}
	// 更多职位弹窗是否展开
	const isShow = (show) => {
		data.show = show
		if (!show) data.isRefresh = false
		data.params.company_id = data.id
		nextTick(() => {
			getListHeight()
		})
	}

	// 获取列表展示高度
	const getListHeight = async () => {
		let res = await uni.$u.getRect('.touch_popup_header');
		if (res) {
			data.height = (uni.$u.sys().windowHeight * 0.9 - res.height) + 'px'
		}
	}
	// 地图导航
	const openLocation = () => {
		uni.openLocation({
			latitude: Number(data.companyInfo.base_info.map_lat),
			longitude: Number(data.companyInfo.base_info.map_lng)
		});
	}
	// 取消分享
	const close = () => {
		data.isShare = false
		data.isTouch = true
	}
	// 分享
	const shareClick = async () => {
		try {
			let list = await uni.$u.api.getTplindexList()
			uni.showLoading()
			let params = {
				type: 'company',
				id: data.id,
				index: uni.$u.random(1, list.length)
			}
			let res = await uni.$u.api.getPosterGenerate({
				params
			})
			data.isShare = true
			data.isTouch = false
			data.src = res
			uni.hideLoading()
		} catch (e) {
			uni.hideLoading()
			uni.$u.toast('生成海报失败，请联系客服')
		}
	}
	// 收藏公司
	const collectClick = async () => {
		// 是否登录 未登录跳转登录页
		if (!isLogin.value) return uni.$u.route('/pages/login/login')
		let {
			has_attention
		} = data.companyInfo
		data.companyInfo.has_attention = has_attention == 1 ? 0 : 1
		let params = {
			comid: data.id
		}
		let res
		// // 1-收藏过 0-未收藏
		if (has_attention == 0) {
			res = await uni.$u.api.getFavCompanyAdd(params)
		} else {
			res = await uni.$u.api.getFavCompanyCancel(params)
		}
	}
	// 获取公司信息详情
	const getCompanyInfo = async () => {
		let params = {
			id: data.id
		}
		data.companyInfo = await uni.$u.api.getCompanyInfo({
			params
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		color: #101010;

		&_main {
			padding: 0 30rpx;
			padding-bottom: 200rpx;

			&_tag {
				background-color: #fff;
				border-radius: 14rpx;
				margin-right: 18rpx;
				color: #101010;
				font-size: 24rpx;
				width: 196rpx;
				height: 84rpx;
				text-align: center;
				line-height: 84rpx;
				border: 1px solid #d5d1d1;
				font-size: 28rpx;
			}
		}

		.touch_popup {
			width: 100vw;
			position: relative;
			z-index: 999;

			&_item {
				padding: 20rpx 32rpx;
				border-bottom: 1px solid #bbb;
				padding-bottom: 30rpx;
				color: #101010;
			}
		}
	}
</style>